/**
 * 精英团队构成组件
 * 展示团队架构、规模组成和核心成员介绍
 */

import { motion } from "framer-motion";
import {
    PieChart,
    Pie,
    Cell,
    Tooltip,
    ResponsiveContainer
} from "recharts";
import { teamCompositionData, COLORS } from "../../data/homeData";

interface TeamSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function TeamSection({ sectionRef }: TeamSectionProps) {
    return (
        <section
            ref={sectionRef}
            className="py-20 bg-gradient-to-br from-indigo-50 to-purple-50">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">精英团队构成</h2>
                </motion.div>
                
                <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
                    {/* 左侧团队架构图 */}
                    <div className="md:col-span-7">
                        <h3 className="text-2xl font-semibold text-indigo-800 mb-8">团队架构</h3>
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: -30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-8 rounded-2xl shadow-xl h-[400px] flex items-center justify-center">
                            <div className="relative w-full max-w-lg h-full">
                                {/* 核心领导团队 */}
                                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-indigo-600 rounded-full flex items-center justify-center text-white text-center z-30">
                                    <div>
                                        <p className="font-bold text-lg">核心领导团队</p>
                                        <p className="text-xs mt-1">战略决策</p>
                                    </div>
                                </div>
                                
                                {/* 技术团队 */}
                                <div className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-purple-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                    <div>
                                        <p className="font-bold">技术团队</p>
                                        <p className="text-xs mt-1">AI研发</p>
                                    </div>
                                </div>
                                
                                {/* 产品团队 */}
                                <div className="absolute top-1/4 right-1/4 transform translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-blue-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                    <div>
                                        <p className="font-bold">产品团队</p>
                                        <p className="text-xs mt-1">用户体验</p>
                                    </div>
                                </div>
                                
                                {/* 数据团队 */}
                                <div className="absolute bottom-1/4 left-1/4 transform -translate-x-1/2 translate-y-1/2 w-32 h-32 bg-teal-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                    <div>
                                        <p className="font-bold">数据团队</p>
                                        <p className="text-xs mt-1">数据处理</p>
                                    </div>
                                </div>
                                
                                {/* 商业团队 */}
                                <div className="absolute bottom-1/4 right-1/4 transform translate-x-1/2 translate-y-1/2 w-32 h-32 bg-pink-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                    <div>
                                        <p className="font-bold">商业团队</p>
                                        <p className="text-xs mt-1">市场拓展</p>
                                    </div>
                                </div>
                                
                                {/* 连接线 */}
                                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] rounded-full border-2 border-dashed border-gray-300 z-10"></div>
                            </div>
                        </motion.div>
                    </div>
                    
                    {/* 右侧团队规模与组成 */}
                    <div className="md:col-span-5">
                        <h3 className="text-2xl font-semibold text-indigo-800 mb-8">团队规模与组成</h3>
                        <motion.div
                            initial={{
                                opacity: 0,
                                x: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                x: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.3
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white p-8 rounded-2xl shadow-xl h-[400px] flex flex-col">
                            <div className="grid grid-cols-2 gap-6 h-full">
                                <div className="flex flex-col justify-center">
                                    <div className="mb-6">
                                        <p className="text-sm text-gray-600">核心团队成员</p>
                                        <p className="text-4xl font-bold text-indigo-800 mt-1">25<span className="text-lg">人</span></p>
                                    </div>
                                    <div className="mb-6">
                                        <p className="text-sm text-gray-600">技术人员占比</p>
                                        <p className="text-4xl font-bold text-purple-600 mt-1">65<span className="text-lg">%</span></p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-gray-600">博士及以上学历</p>
                                        <p className="text-4xl font-bold text-blue-600 mt-1">40<span className="text-lg">%</span></p>
                                    </div>
                                </div>
                                <div className="flex items-center justify-center">
                                    <div className="w-full h-48">
                                        <ResponsiveContainer width="100%" height="100%">
                                            <PieChart>
                                                <Pie
                                                    data={teamCompositionData}
                                                    cx="50%"
                                                    cy="50%"
                                                    innerRadius={60}
                                                    outerRadius={90}
                                                    paddingAngle={5}
                                                    dataKey="value"
                                                    label={({ name, percent }: { name: string; percent: number }) => `${name} ${(percent * 100).toFixed(0)}%`}>
                                                    {teamCompositionData.map((entry: any, index: number) => (
                                                        <Cell
                                                            key={`cell-${index}`}
                                                            fill={COLORS.chartColors[index % COLORS.chartColors.length]} />
                                                    ))}
                                                </Pie>
                                                <Tooltip
                                                    formatter={(value: any) => [`${value}%`, "占比"]}
                                                    contentStyle={{
                                                        backgroundColor: "white",
                                                        border: "none",
                                                        borderRadius: "10px",
                                                        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                    }} />
                                            </PieChart>
                                        </ResponsiveContainer>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                </div>
                
                {/* 核心团队成员 */}
                <div className="mt-20">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">核心团队成员</h3>
                    <motion.div
                        initial={{
                            opacity: 0,
                            y: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            y: 0
                        }}
                        transition={{
                            duration: 0.6
                        }}
                        viewport={{
                            once: true
                        }}
                        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {/* 黄瑞馨博士 */}
                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                            <div className="bg-gradient-to-b from-indigo-50 to-white p-6 text-center">
                                <div className="w-20 h-20 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-user-tie text-white text-2xl"></i>
                                </div>
                                <h4 className="font-bold text-indigo-800 text-lg">黄瑞馨 博士</h4>
                                <p className="text-sm text-indigo-600 mb-3">首席执行官</p>
                                <p className="text-xs text-gray-600">前BAT资深AI架构师，北京大学计算机博士，10年AI领域经验</p>
                            </div>
                        </div>
                        
                        {/* 张明博士 */}
                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                            <div className="bg-gradient-to-b from-purple-50 to-white p-6 text-center">
                                <div className="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-laptop-code text-white text-2xl"></i>
                                </div>
                                <h4 className="font-bold text-purple-800 text-lg">张明 博士</h4>
                                <p className="text-sm text-purple-600 mb-3">首席技术官</p>
                                <p className="text-xs text-gray-600">前Google Brain研究员，清华大学AI实验室博士，NLP领域专家</p>
                            </div>
                        </div>
                        
                        {/* 李婷 */}
                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                            <div className="bg-gradient-to-b from-blue-50 to-white p-6 text-center">
                                <div className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-lightbulb text-white text-2xl"></i>
                                </div>
                                <h4 className="font-bold text-blue-800 text-lg">李婷</h4>
                                <p className="text-sm text-blue-600 mb-3">首席产品官</p>
                                <p className="text-xs text-gray-600">前领英中国产品总监，8年HR科技产品经验，斯坦福MBA</p>
                            </div>
                        </div>
                        
                        {/* 王强博士 */}
                        <div className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                            <div className="bg-gradient-to-b from-teal-50 to-white p-6 text-center">
                                <div className="w-20 h-20 bg-teal-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-database text-white text-2xl"></i>
                                </div>
                                <h4 className="font-bold text-teal-800 text-lg">王强 博士</h4>
                                <p className="text-sm text-teal-600 mb-3">首席数据官</p>
                                <p className="text-xs text-gray-600">前阿里云数据科学家，麻省理工学院计算机科学博士，数据挖掘专家</p>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}